
import React from 'react';
import { Groups } from '../types.ts';
import { UsersIcon } from './icons/UsersIcon.tsx';

interface GroupDisplayProps {
  groups: Groups;
  totalSlotsPerGroup: number;
}

const GroupCard: React.FC<{ title: string; names: string[]; color: string; count: number; capacity: number }> = ({ title, names, color, count, capacity }) => {
  return (
    <div className="bg-slate-800/50 backdrop-blur-sm rounded-xl shadow-lg flex-1 min-w-[280px] h-80 flex flex-col">
      <div className={`p-4 rounded-t-xl border-b-4 ${color}`}>
        <h3 className="text-2xl font-bold text-white text-center">{title}</h3>
        <p className="text-center text-slate-300 text-sm">{count} / ~{capacity} 人</p>
      </div>
      <div className="p-4 overflow-y-auto flex-grow">
        {names.length === 0 ? (
          <div className="flex flex-col items-center justify-center h-full text-slate-500">
            <UsersIcon className="w-12 h-12 mb-2" />
            <p>等待队长加入...</p>
          </div>
        ) : (
          <ul className="space-y-2">
            {names.map((name, index) => (
              <li key={index} className="bg-slate-700/50 text-slate-200 rounded-md px-3 py-2 text-sm truncate animate-fade-in">
                {name}
              </li>
            ))}
          </ul>
        )}
      </div>
    </div>
  );
};

const GroupDisplay: React.FC<GroupDisplayProps> = ({ groups, totalSlotsPerGroup }) => {
  // 动态颜色配置
  const colors = ['border-red-500', 'border-blue-500', 'border-green-500', 'border-yellow-500', 'border-purple-500', 'border-pink-500', 'border-cyan-500', 'border-lime-500'];

  return (
    <div className="w-full px-2">
      <div className="flex flex-wrap justify-center gap-4 md:gap-6">
        {Object.keys(groups).map((groupKey, index) => (
          <GroupCard
            key={groupKey}
            title={groupKey}
            names={groups[groupKey]}
            color={colors[index % colors.length]}
            count={groups[groupKey].length}
            capacity={totalSlotsPerGroup}
          />
        ))}
      </div>
    </div>
  );
};

export default GroupDisplay;